<template>
  <section class="platform-nav">
    <el-tabs v-model="active" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="item in systems"
        :key="item.name"
        :label="item.title"
        :name="item.name"
        :path="item.path"
      />
    </el-tabs>
  </section>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'

const { mapGetters } = createNamespacedHelpers('app')

export default {
  name: 'PlatformNav',
  computed: {
    ...mapGetters(['systems', 'appId']),
    active: {
      get() {
        return this.appId || ''
      },
      set(val) {
        return val
      }
    }
  },
  methods: {
    handleTabClick(tab) {
      const path = tab.$attrs.path
      location.href = `${location.origin}${path}`
    }
  }
}
</script>

<style lang="less" scoped>
.platform-nav {
  padding: 0 20px;
  /deep/ .el-tabs__header {
    margin: 0;
  }
  /deep/ .el-tabs__nav-wrap::after {
    height: 0px;
  }
  /deep/ .el-tabs__active-bar {
    display: none;
  }
}
</style>
